<template>
  <div class="home-page">
    <div class="top">
      <div class="search">
         <span class="adress" @click="cityFn">{{$store.state.city.currentCity}}</span>
        <van-search v-model="value" show-action label="上海" placeholder="请输入小区或地址" />
       
        <van-icon name="location-o" class="address"  @click="mapFn"/>
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in swiper" :key="item.id">
          <img :src="'http://liufusong.top:8080'+item.imgSrc" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div>
      <van-grid :border="false" clickable :column-num="4" class="center-nav">
        <van-grid-item icon="wap-home-o" text="整租" to="/layout/house" />
        <van-grid-item icon="friends-o" text="合租" to="/layout/house" />
        <van-grid-item icon="location-o" text="地图找房" to="/mymap" />
        <van-grid-item icon="home-o" text="去出租" to="/layout/my" />
      </van-grid>
    </div>
    <div class="housegroup">
      <div class="title">
        <h3>租房小组</h3>
        <span>更多</span>
      </div>
      <ul class="content">
        <li class="list" v-for="item in houseGro" :key="item.id">
          <div class="pic">
            <img :src="'http://liufusong.top:8080'+item.imgSrc" alt="">
          </div>
           <div class="right">
            <p>{{item.title}}</p>
            <p>{{item.desc}}</p>
           </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {houseGroup,navSwipe} from '@/api/home'
export default {
  props: {},
  data() {
    return {
      value: '',
      swiper: [],
      houseGro:[],
    }
  },
  computed: {
  },
  created() {
    this.getNavpic(),
    this.getHousegroup()
  },
  mounted() {},
  watch: {},
  methods: {
    async getNavpic() {
      try {
        const res = await navSwipe()     
        // console.log(res)
        this.swiper = res.body
        // console.log(this.swiper)
      } catch (err) {
        console.log(err)
      }
    },
    async getHousegroup(){
      try{
          const res= await houseGroup()
          // console.log(res);
          this.houseGro=res.body
        //  console.log(this.houseGro);
      } catch(err){
        console.log(err);
      }
    },
    cityFn(){
      this.$router.push('/citylist')
    },
   mapFn(){
    this.$router.push('/mymap')
   }
  },
  components: {},
}
</script>

<style scoped lang="less">
.home-page {
  background-color: #f6f6f6;
  .top {
    .van-search__action {
      display: none;
    }
    .search {
      display: flex;
      align-items: center;
      position: absolute;
      top: 18px;
      left: 8px;
      z-index: 9999;
      .adress{
        position: absolute;
        left:16px;
        top:17px;
        font-size: 14px;
        color: #333;
        transform: translateX(10px);
      }
      .van-search {
        background-color: transparent;
        .van-search__content {
          background-color: #fff;
          width: 300px;
          margin-right: 10px;
          flex: 1;
          .van-search__label {
            font-size: 14px;
            color:transparent;
          }
        }
      }
      .van-icon {
        width: 25px;
        height: 25px;
        color: #fff;
        font-size: 24px;
      }
    }

    .my-swipe {
      .van-swipe-item {
        color: #fff;
        font-size: 20px;
        height: 220px;
        line-height: 220px;
        text-align: center;
        //   background-color: #39a9ed;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .center-nav {
    background-color: #fff;
    height: 122px;
    color: #07b06a;
    .van-grid-item__content {
      height: 122px;

      .van-icon {
        width: 60px;
        height: 60px;
        background-color: aqua;
      }
      span.van-grid-item__text {
        font-size: 14px;
        color: #333;
      }
    }
  }

  .housegroup {
    background-color: #f6f5f6;
    padding: 0 10px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        font-size: 15px;
        color: #333;
      }
      span {
        color: #787d82;
        font-size: 14px;
      }
    }
    .content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
      .list {
        display: flex;
        width: 172px;
        height: 60px;
        margin-bottom: 10px;
        background-color: #fff;
        .pic{
          width: 50px;
          height: 50px;
          // background-color: aqua;
          margin: 0 10px;
          img{
            width: 100%;
          }
        }
        .right{
          flex: 1;
          padding-top:5px;
          p{
            margin: 0;
            padding: 0;
            color: #333;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
